<template>
  <transition name="bounce" mode="out-in">
    <section class="mui-content pd">
      <mh-header headName="退货申请"> </mh-header>
      <div class="ret-g bg-w">
        <div class="ret-row mh-pd flex-bt">
          <span>是否收到货</span>
          <div class="ret-row-r flex">
            <div class="mui-input-row mui-radio mui-left">
              <label>收到</label>
              <input name="radio1" type="radio">
            </div>
            <div class="mui-input-row mui-radio mui-left">
              <label>未收到</label>
              <input name="radio1" type="radio">
            </div>
          </div>
        </div>
        <div class="ret-row mh-pd flex-bt">
          <span>是否需要退货</span>
          <div class="ret-row-r flex">
            <div class="mui-input-row mui-radio mui-left">
              <label>需要</label>
              <input name="radio1" type="radio">
            </div>
            <div class="mui-input-row mui-radio mui-left">
              <label>不需要</label>
              <input name="radio1" type="radio">
            </div>
          </div>
        </div>
        <div class="ret-row">
          <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-collapse">
              <a class="mui-navigate-right select-reason" href="javascript:">退款原因
                <span class="mui-pull-right">请选择退款原因</span>
              </a>
              <div class="mui-collapse-content">
                <p>未收到货</p>
              </div>
            </li>
          </ul>
        </div>
        <div class="ret-row mh-pd flex-bt">
          <span>退回金额</span>
          <span class="ret-row-r price">￥399.00</span>
        </div>
      </div>
      <div class="return-des mh-pd bg-w flex">
        <span>退款说明：</span>
        <input type="text" placeholder="请输入退款说明">
      </div>

      <div class="mh-pd bg-w">
        <button type="button" class="mui-btn-block mh-btn">提交申请</button>
      </div>
    </section>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  export default {
    name: "return-goods",
    components: {
      MhHeader
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .mui-input-row label {
    line-height: 3rem;
    padding-right: 0;
    padding-left: 50px;
    @include sc(1.4rem, #777);
  }
  .ret-row {
    border-bottom: 1px solid #eee;
    @include sc(1.4rem, #777);
  }
  .select-reason {
    span {
      margin-right: 1.5rem;
      @include sc(1.4rem, #999);
    }
  }
  .return-des {
    padding-top: 0;
    span {
      display: inline-block;
      @include sc(1.4rem, #777);
      word-break: keep-all;
    }
    input {
      height: 4rem;
      margin: 0;
      border: 0;
    }
  }

</style>
